<template>
	<!-- 名片 -->
	<view class="card_box p-3">
		<view class="auth_tag" v-if="cardFrom.attestation == 1"><image src="@/static/img2/my/authcard2.png" mode="aspectFit"></image></view>
		<view class="card_cont p-5 bg-white rounded_15">
			<view class="switch_box flex" v-if="meCard">
				<text class="font_24 c_9">私密：</text>
				<u-switch v-model="authCard" size="20" inactiveColor="#e2e2e2" activeColor="#CF1526" @change="switchChange"></u-switch>
			</view>
			<view class="card_info w-100">
				<view class="flex">
					<u-avatar :src="cardFrom.userphoto" size="45" mode="aspectFill" @click="avatarPreview(cardFrom.userphoto)"></u-avatar>
					<view class="ml-1">
						<view class="flex">
							<view class="font_36 font-weight-bold">
								<text v-if="!cardFrom.name" class="empty_text">姓名</text>
								<text v-else>{{ cardFrom.name }}</text>
							</view>
							<view class="h6">
								<text v-if="!cardFrom.post" class="empty_text ml-3">职位</text>
								<text class="ml-3" v-else>{{ cardFrom.post }}</text>
							</view>
						</view>
						<view class="h6">
							<text v-if="!cardFrom.companyname" class="empty_text">企业名称</text>
							<text v-else>{{ cardFrom.companyname }}</text>
						</view>
					</view>
				</view>
				<view class="flex justify-between align-end w-100">
					<view class="" style="width: 80%;">
						<view class="flex align-center my-1 h6">
							<view class="card_icon"><image class="card_icon" src="@/static/img2/my/my_card/phone.png" mode="aspectFit"></image></view>
							<text v-if="!cardFrom.phone" class="empty_text ml-2">手机号</text>
							<text class="ml-1" v-else>{{ cardFrom.phone }}</text>
						</view>
						<!-- <view class="flex align-center my-1 h6">
							<view class="card_icon">
								<image class="card_icon" src="@/static/img2/my/my_card/weChart.png" mode="aspectFit" style="transform: scale(1.3);"></image>
							</view>
							<text v-if="!cardFrom.wechat_id" class="empty_text ml-2">微信号</text>
							<text class="ml-1" v-else>{{ cardFrom.wechat_id }}</text>
						</view> -->
						<view class="flex align-center my-1 h6">
							<view class="card_icon"><image class="card_icon" src="@/static/img2/my/my_card/email.png" mode="aspectFit"></image></view>
							<text v-if="!cardFrom.mail" class="empty_text ml-2">邮箱</text>
							<text class="ml-1" v-else>{{ cardFrom.mail }}{{ cardFrom.emailSuffix || '' }}</text>
						</view>
						<!-- <view class="flex align-center my-1 h6">
							<view class="card_icon">
								<image class="card_icon" src="@/static/img2/my/my_card/dress.png" mode="aspectFit"></image>
							</view>
							<text v-if="!cardFrom.address" class="empty_text ml-2">公司地址</text>
							<text class="ml-1 word_break" v-else>{{ cardFrom.address }}</text>
						</view> -->
					</view>
					<!-- <view class="card_r p">
						<image class="ewm" v-if="!cardFrom.orcode_img || cardFrom.orcode_img.length == 0" src="@/static/img2/my/my_card/default_ewm.png" mode=""></image>
						<image class="ewm" v-else :src="cardFrom.orcode_img[0].url" mode="aspectFill"></image>
					</view> -->
				</view>
			</view>
			<view class="bottom_tag c_9 text-center font_22" v-if="(cardFrom.card_status == 0 || cardFrom.card_status == 2) && cardFrom.is_overt == 1">(加密信息交换后可见)</view>
			<!-- <button class="share_btn" open-type="share" v-if="cardFrom.card_status == 3 || meCard">分享名片</button> -->
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
import { userOvert } from '@/api/my/card.js';
export default {
	props: ['cardCont', 'meCard'],
	data() {
		return {
			cardFrom: {},
			authCard: false
		};
	},
	watch: {
		cardCont: {
			handler(newV, oldV) {
				this.cardFrom = newV;
				this.authCard = this.cardFrom.is_overt == 1 ? true : false;
			},
			deep: true,
			immediate: true
		}
	},
	mounted() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	//分享到聊天
	onShareAppMessage(res) {
		return {
			title: this.cardFrom.name + '的名片',
			path: '/subPages/my/list/card/card_main?id=' + this.cardFrom.uid //界面路径
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.cardFrom.name + '的名片',
			path: '/subPages/my/list/card/card_main?id=' + this.cardFrom.uid, //界面路径
			imageUrl: '/static/img2/home/company_head.png'
		};
	},
	methods: {
		// 我的名片是否公开
		switchChange(e) {
			// 1:私密 0:公开
			userOvert({ is_overt: e ? 1 : 0 }).then(res => {
				// console.log(res);
				this.$refs.uToast.show({
					position: 'top',
					message: res.msg
				});
				if (e == 1) {
					uni.$u.toast('您的联系方式将被加密');
				}
			});
		},
		// 图片预览
		avatarPreview(img) {
			uni.previewImage({
				urls: [img],
				success(res) {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card_box {
	width: 100%;
	// background: linear-gradient(-27deg, #f28e26, #fd644f);
	background: $color14;
	position: relative;

	.card_info {
		.card_icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.empty_text {
		color: #c0c0c0;
	}

	.card_r {
		width: 20%;

		// margin-left: 30rpx;
		.ewm {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.auth_tag {
		position: absolute;
		top: 100rpx;
		right: 25rpx;
		z-index: 999;

		image {
			width: 113rpx;
			height: 50rpx;
		}
	}

	.bottom_tag {
		position: relative;
		top: 20rpx;
	}

	.card_cont {
		position: relative;

		.switch_box {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}
	}
}
</style>
